<template>
	<div class="wrapper">

		<!-- header部分 -->
		<header>
			<p>在线支付</p>
		</header>

		<!-- 订单信息部分 -->
		<h3 v-if="status==0">充值：</h3>
		<h3 v-else-if="status==1">提现：</h3>
		<h3 v-else>开通会员：</h3>
		<div class="order-info">
			<p>
				<input v-if="status==0" v-model="inputValue" placeholder="充值金额" />
				<input v-else-if="status==1" v-model="inputValue" placeholder="提现金额" />
				<span v-else>开通{{month}}个月会员&#165;{{ cost }}</span>
			</p>
		</div>
		<h3 v-if="status==1">提现至：</h3>
		<!-- 支付方式部分 -->
		<ul class="payment-type">
			<li>
				<img src="../assets/alipay.png">
				<!--<i class="fa fa-check-circle"></i>-->
				<input type="radio" v-model="paymentType" value="2" style="width:3vw;height: 3.2vw;">
				<img src="../assets/wechat.png">
				<!--<i class="fa fa-check-circle"></i>-->
				<input type="radio" v-model="paymentType" value="1" style="width:3vw;height: 3.2vw;">
				<img src="../assets/wallet.png" v-if="status != 0&& status != 1">
				<input type="radio" v-model="paymentType" value="0" style="width:3vw;height: 3.2vw;" v-if="status != 1 && status != 0"/>
			</li>
		</ul>
		<div class="payment-button">
			<button @click="pay()">{{buttonText}}</button>
		</div>

		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed,
		getCurrentInstance
	} from 'vue';
	import Footer from '../components/Footer.vue';
	import {
		useRoute,
		useRouter
	} from 'vue-router';
	import axios from 'axios';
	import qs from 'qs';

	const route = useRoute();
	const router = useRouter();
	const {
		proxy
	} = getCurrentInstance();
	const cns = getCurrentInstance();

	const paymentType = ref(0);
	const status = ref(route.query.status);
	const inputValue = ref();
	const user = ref({});
	const month = computed(() => {
		if (status.value == 2) {
			return 1;
		} else if (status.value == 3) {
			return 3;
		} else if (status.value == 4) {
			return 6;
		} else if (status.value == 5) {
			return 12;
		}
	});
	const cost = computed(() => {
		if (status.value == 2) {
			return 10;
		} else if (status.value == 3) {
			return 30;
		} else if (status.value == 4) {
			return 60;
		} else if (status.value == 5) {
			return 120;
		}
	});
	const buttonText = computed(() => {
		if (status.value == 0) {
			return "确认充值";
		} else if (status.value == 1) {
			return "确认提现";
		} else {
			return "确认支付";
		}
	});

	onMounted(() => {
		user.value = proxy.$getSessionStorage('user');
	});


	const pay = async () => {
		if (status.value == 0) {
			if (inputValue.value == 0) {
				alert("请输入金额");
				return;
			}
			await axios.get(`WalletController/recharge/${user.value.userId}/${inputValue.value}`).then(
				response => {
					if (response.data == 1) {
						alert("充值成功");
					} else {
						alert("充值失败");
					}
				}).catch(error => {
				console.error(error);
			});
		} else if (status.value == 1) {
			if (inputValue.value == 0) {
				alert("请输入金额");
				return;
			}
			await axios.get(`WalletController/draw/${user.value.userId}/${inputValue.value}`).then(
				response => {
					if (response.data == 1) {
						alert("提现成功");
					} else if (response.data==-1){
						alert("支付失败，钱包余额不足");
					}
				}).catch(error => {
				console.error(error);
			});
		} else { //充值会员
			const response = await axios.get(`WalletController/upgradeVIPWallet/${user.value.userId}/${month.value}/${paymentType.value}`);
			const res=response.data;//if块内定义同名变量response，即使尚未执行仍会导致外层定义的response变量无效
			if (response.data > 0) {
				if(paymentType.value==0){
					axios.get('CreditController/earnCredit', {
						params:{
							userId:user.value.userId,
							channelId:1,
							eventId:res
						}
					});
				}
				alert("购买成功");
				const response = await axios.post('UserController/getUserByIdByPass', qs.stringify({
					userId:user.value.userId,
					password:user.value.password
				}));
				user.value = response.data;
				if (user.value == 0) { //为什么刚开始返回null，现在返回0
					alert('出BUG了QAQ');
				} else {
					//sessionstorage有容量限制，可能存在数据溢出
					//user.userImg = '';
					cns.appContext.config.globalProperties.$setSessionStorage('user', user.value);
				}
			} else if (response.data==-1){
				alert("支付失败，钱包余额不足");
			}
		}
		router.push({
			path: '/index'
		});
	};
</script>

<style scoped>
	/****************** 总容器 ******************/
	.wrapper {
		width: 100%;
		height: 100%;
	}

	/****************** header部分 ******************/
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	/****************** 订单信息部分 ******************/
	.wrapper h3 {
		margin-top: 12vw;
		box-sizing: border-box;
		padding: 4vw 4vw 0;

		font-size: 4vw;
		font-weight: 300;
		color: #999;
	}

	.wrapper .order-info {
		box-sizing: border-box;
		padding: 4vw;
		font-size: 4vw;
		color: #666;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .order-info p:last-child {
		color: orangered;
	}

	/****************** 订单明细部分 ******************/
	.wrapper .order-detailet {
		width: 100%;
	}

	.wrapper .order-detailet li {
		width: 100%;
		box-sizing: border-box;
		padding: 1vw 4vw;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .order-detailet li p {
		font-size: 3vw;
		color: #666;
	}

	/****************** 支付方式部分 ******************/
	.wrapper .payment-type {
		width: 100%;
	}

	.wrapper .payment-type li {
		width: 100%;
		box-sizing: border-box;
		padding: 4vw;

		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.wrapper .payment-type li img {
		width: 33vw;
		height: 8.9vw;
	}

	.wrapper .payment-type li .fa-check-circle {
		font-size: 5vw;
		color: #38CA73;
	}

	.wrapper .payment-button {
		width: 100%;
		box-sizing: border-box;
		padding: 4vw;
	}

	.wrapper .payment-button button {
		width: 100%;
		height: 10vw;
		border: none;
		/*去掉外轮廓线*/
		outline: none;
		border-radius: 4px;
		background-color: #38CA73;
		color: #fff;
	}
</style>